<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <title></title>
        <script src="./lib/vue.js"></script>
        <link rel="stylesheet" href="ShoppingCar.css">
	</head>
	<body>
        <div id="app">
            <div class="good">
                <h4>商品列表</h4>
               
                <div class="item">
                    <ul v-for="(good,i) in list">
                        <!-- <li>{{user.name}}</li> -->
                        {{good.name}}
                        <button v-on:click="add(i)">添加</button>
                    </ul>
                </div>
                <br>
                <button>结算</button>
            </div>
           
            
    
            <div class="good">
                <h4>购物车商品列表</h4>
                
                <div class="item" id="id2">
                    <ul v-for='(list,index) in classlist'>
                        <!-- <li>{{list}}</li> -->
                        {{list}}
						<button @click='remove(index)'>删除</button>
                    </ul>
                    
                    <p>全选<input type="checkbox" v-model="checks" @change="Numlist()"></p>
				<ul v-for='(list,index) in classlist'>
					<input type="checkbox" v-model="checksListOn" :value="list.name">{{list.name}}
					<button @click='remove(index)'>删除<button>
				</ul>
                </div>
            </div>
        </div> 

		<script>
			new Vue({
				el: '#app',
				data: {
					classlist:[],
					list:[
						{id:1,name:"商品一"},
						{id:2,name:"商品二"},
						{id:3,name:"商品三"},
						{id:4,name:"商品四"},
						{id:5,name:"商品五"}
					],
					
				},
				methods: {
					add(index){
						//插入数据到商品库
						this.classlist.push(this.list[index].name)
					},
					remove:function(index){
						this.classlist.splice(index,1)
					},
                    Numlist: function () {

if (this.checks) {
    var listArr = [];
    for (var i = 0; i < this.classlist.length; i++) {
        listArr.push(this.classlist[i].name);
    }
    this.checksListOn = listArr;
} else {
    this.checksListOn = []
}
},

},
				}
			})
		</script>
	</body>
<html>